<template>
  <div class="alert_container">
    <div class="alert-body text-center">
      <i class="iconfont icon-icon-remove"></i>
      <div>{{alertText}}</div>
      <button @click="closeTop" class="font-xxl">确认</button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "AlertTip",
    props:{
      alertText:String
    },
    methods:{
      closeTop(){
        this.$emit('closeTip')
      }
    }
  }
</script>

<style lang="scss" scoped>
.alert_container{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,.3);
  .alert-body{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -112px;
    margin-top: -77px;
    width: 225px;
    height: 154px;
    border-radius: 8px;
    background-color: #fff;
    .iconfont {
      font-size: 60px;
      color: #f8cb86;
    }
    div{
      font-size: 14px;
      color: #333;

    }
    button {
      width: 100%;
      margin-top: 10px;
      background-color: #4cd96f;
      height: auto;
      padding: 6px;
      color: #ffffff;
      font-weight: 700;
      border-radius: 3px;
    }
  }

}
</style>
